/*
 * @Description:
 * @Author: Rfan
 * @Date: 2022-06-28 18:48:18
 * @LastEditTime: 2022-07-06 19:49:32
 */

import { FC, useEffect, useState } from 'react';
import { Button, Checkbox, Menu, Modal, Space, Typography } from 'antd';
import classNames from 'classnames/bind';
import type { SelectInfo } from 'rc-menu/lib/interface';
import type { CheckboxValueType } from 'antd/lib/checkbox/Group';
import { jsonClone } from '@/utils';
import type { ICommonDialog } from '@/interfaces/global';

import styles from '../../styles/archivesMgt.module.scss';

const cx = classNames.bind(styles);

interface ArchivesMgtDialogProps extends ICommonDialog {}

const ArchivesMgtDialog: FC<ArchivesMgtDialogProps> = (props) => {
  const { visible, onClose } = props;

  // 全宗列表
  const [fondsList, setFondsList] = useState([]);
  // 选中的全宗
  const [selectFond, setSelectFond] = useState(0);
  // 档案类型列表
  const [ATList, setATList] = useState([]);
  // 各全宗选中的档案类型
  const [selectAT, setSelectAT] = useState<any>({});

  useEffect(() => {
    if (visible) {
      // 获取全宗列表，设置默认全宗
      // setFondsList();
      // setSelectFond();
    }
  }, [visible]);
  useEffect(() => {
    if (selectFond > 0) {
      // 设置全宗下档案类型列表
      // setATList();
    }
  }, [selectFond]);

  /**
   * @description: 关闭弹窗方法
   */
  const onCancel = () => {
    onClose();
  };

  /**
   * @description: 选择全宗方法
   * @param {SelectInfo} param1 选中的项目
   */
  const menuSelected = ({ key }: SelectInfo) => {
    setSelectFond(parseInt(key, 10));
  };

  const selectATFunc = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
    setSelectAT((state: any) => ({
      ...state,
      [selectFond]: checkedValues
    }));
  };

  // 档案类型 - 全选
  const selectAllAT = () => {
    setSelectAT((state: any) => ({
      ...state,
      [selectFond]: ATList.map((item) => item.id)
    }));
  };

  // 档案类型 - 反选
  const selectOppAT = () => {
    const _select = jsonClone(selectAT[selectFond] || []);
    const _all = ATList.map((item) => item.id);
    setSelectAT((state: any) => ({
      ...state,
      [selectFond]: _all.filter((id) => _select.indexOf(id) < 0)
    }));
  };

  return (
    <Modal
      title="档案节点管理"
      visible={visible}
      width={500}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
        <Button key="save" type="primary" onClick={() => {}}>
          保存
        </Button>
      ]}
    >
      <Typography.Paragraph>
        全宗节点和档案类型节点成套出现，如果全宗下没有选中档案类型，则全宗节点不做展示。
      </Typography.Paragraph>
      <div className={cx('select-wrap')}>
        <div className={cx('fonds-side')}>
          <h6>选择全宗</h6>
          <Menu items={fondsList} selectedKeys={[`${selectFond}`]} onSelect={menuSelected} />
        </div>
        <div className={cx('at-side')}>
          <div className={cx('at-operate')}>
            <Button
              type="text"
              onClick={() => {
                selectAllAT();
              }}
            >
              全选
            </Button>
            <Button
              type="text"
              onClick={() => {
                selectOppAT();
              }}
            >
              反选
            </Button>
          </div>
          <Checkbox.Group value={selectAT[selectFond]} onChange={selectATFunc}>
            <Space direction="vertical">
              {ATList.map((item) => (
                <Checkbox value={item.id}>{item.atName}</Checkbox>
              ))}
            </Space>
          </Checkbox.Group>
        </div>
      </div>
    </Modal>
  );
};

export default ArchivesMgtDialog;
